<style lang="scss" scoped>
.guanzhu {
    display: flex;
    padding: 10px 0;
margin-left: 10px;

    img {
        width: 150px;
        height: 150px;
    }
    .guanzhu1{
        margin-left: 10px;
        font-size: 16px;
        line-height: 40px;
    }
}
</style>
<template>
    <div>
        <!-- 导航栏，标题为“收藏”，左侧有返回按钮，点击返回上一页 -->
        <van-nav-bar title="收藏" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <!-- 遍历guanzhuList数组，渲染每个item -->
        <div v-for="(item, index) in guanzhuList" :key="index">
            <div class="guanzhu">
                <img v-lazy="item.image" alt="">
                <div class="guanzhu1">
                        <!-- 显示item的name属性 -->
                   <p>姓名:{{ item.name }}</p>
                    <p>
                       科室: {{ item.department }}
                    </p>
                    <p>标题:{{ item.title }}</p>
                    <p>省份:{{ item.provinces }}</p>
                
                </div>
                <!-- 点击按钮取消关注，调用quxiao方法，传入item的id -->
    
            </div>
                        <van-button style="margin-left: 20px;" type="danger" size="small"
                    @click="quxiao(item.id)">取消关注</van-button>
            <div>
                <!-- 显示item的详细信息 -->
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
// 定义一个ref类型的变量guanzhuList，用于存储关注列表
const guanzhuList = ref([]);
// 获取关注列表的方法
const get_guanzhuList = () => {
    // 清空guanzhuList
    guanzhuList.value = []
    // 遍历localStorage，获取以'guan_'开头的key
    for (let i = 0; i < localStorage.length; i++) {
        let key = localStorage.key(i)
        if (key?.startsWith('guan_')) {
            // 将对应的value解析为对象，并添加到guanzhuList中
            const item = JSON.parse(localStorage.getItem(key))
            guanzhuList.value.push(item)
        }
    }
}
// 取消关注的方法
const quxiao = (id) => {
    // 从localStorage中移除对应的key
    localStorage.removeItem(`guan_${id}`)
    // 重新获取关注列表
    get_guanzhuList()
}
// 组件挂载时，获取关注列表
onMounted(() => {
    get_guanzhuList()
})

</script>
